<template>
  <view>
    <view class="times u-flex flex_bt" @click="timeShow">
      <view class="u-flex">
        <view>
          <u-image :src="`/static/user/rili.png`"  :height="48" :width="48" :fade="false"></u-image>
        </view>
        <view class="time">{{time}}</view>
      </view>
      <view>
        <u-icon name="arrow-right"  color="#ACACAC" size="21"></u-icon>
      </view>
    </view>
    <u-picker mode="time" v-model="mothShow" :params="params" @confirm="confirm"></u-picker>
    <u-calendar v-model="show" :mode="mode" :max-year="2050"  max-date="2025-01-01" @change="change"></u-calendar>
  </view>
</template>

<script>
export default {
name: "changeTimes",
  data() {
    return {
      params: {
        year: true,
        month: true,
      },
      mothShow:false,//月份
      show:false, //日期
      mode:'date',
      time:'',
    }
  },
  props:{

    index: {
      type: Number,
      default: 0
    },
    //1是选月份，其他选择日期
    type: {
      type: Number,
      default: 0
    },
  },
  created(){
    let time = new Date().toISOString()
    if(this.type == 1){
      //月份
      this.time  =  time.slice(0, 4)+'-'+ time.slice(5, 7)
    }else {
      this.time  =  time.slice(0, 4)+'-'+ time.slice(5, 7)+'-'+ time.slice(8, 10)
    }
  },
  methods:{
    //选择月份
    confirm(e){
      let mm = e.month
      if (mm < 10&& !mm.toString().includes('0')) {
        mm = '0' + mm
      }
      this.time  =  e.year+'-'+ mm
      this.$emit('confirm', this.time)
    },
    //选择日期
    change(e){
      let dd = e.day
      let mm = e.month
      if (mm < 10&& !mm.toString().includes('0')) {
        mm = '0' + mm
      }
      if (dd < 10&& !dd.toString().includes('0') ) {
        dd = '0' + dd
      }
      this.time  =  e.year+'-'+ mm+'-'+ dd
      this.$emit('change',this.time)
    },
    //选择
    timeShow(){
      if(this.type == 1){
        this.mothShow = true
      }else {
        this.show = true
      }
    },
  },
}
</script>

<style scoped lang="scss">
  .times{
    height: 80rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    margin-top: 20rpx;
    padding: 0 20rpx;
    .time{
      font-size: 32rpx;
      font-weight: bold;
      color: #0F4C3A;
      margin-left: 12rpx;
    }
  }
</style>